<!-- 专家列表 -->
<template>
	<scroll-view @scrolltolower="onLower" @refresherrefresh="onRefresh" refresher-enabled="true"
		:refresher-threshold="40" :refresher-triggered="triggered" scroll-y="true" :style="{height: pageHeight - 130 + 'px'}">
		<uni-card v-for="(item,index) in listData" :key="index" spacing="0" :is-shadow="false"
			:border="false">
			<navigator :url="'/pages/student/consult/expert/details?itemID=' + item.id " hover-class="none">
				<view class="item-dom">
					<view class="flex-row">
						<image v-if="item.avatar" style="width: 50px; height: 50px;  border-radius: 4px;" :src="item.avatar"></image>
						<image v-else style="width: 50px; height: 50px;  border-radius: 4px;" src="@/static/images/user-avatar3.png"></image>
						<view style="padding-left: 10px; width: calc(100% - 70px);">
							<view class="flex-row flex-row-space-between" >
								<text class="title">{{item.name}}</text>
								<!-- <text class="status">在线</text> -->
							</view>
							<view class="flex-row" >
								<text>{{item.workUnit}} - {{item.workPosition}}</text>
							</view>
						</view>
					</view>
					<view class="flex-row" style="padding-top: 10px;">
						<text class="iconfont icon-describe" style="padding-right: 15rpx; color: #01c2b7"></text>
						<text>擅长领域： {{item.skilledField}}</text>
					</view>
				</view>
			</navigator>
		</uni-card>
	</scroll-view>

	<uinloadmore :status="status" />

</template>

<script lang="ts" setup>
	import uinloadmore from "@/components/uni/uni-load-more";
	import { Expert } from "@/api/tables/Expert"
	import { expertPage } from "@/api/consult"
	import { ref, onBeforeMount } from 'vue'
	
	let pageHeight = ref(90)
	let listData = ref<Array<Expert>>([])
	let total = ref(0)
	let pagination = ref({ current: 1, size: 10 })
	const triggered = ref<boolean>(false)
	let status = ref('noMore')
	
	onBeforeMount(() => {
		// 获取当前窗口高度
		pageHeight.value = uni.getSystemInfoSync().windowHeight
		// 监听窗口大小的变化
		uni.onWindowResize((res) => {
			pageHeight.value = res.size.windowHeight
		})
		getListData()
	})
	
	// 上拉加载
	function onLower() {
		if (total.value <= listData.value.length) {
			status.value = 'noMore'
		} else {
			status.value = 'loading'
			pagination.value.current++
			getListData()
		}
	}
	// 下拉刷新
	function onRefresh() {
		pagination.value.current = 1
		triggered.value = true
		getListData()
	}
	
	function getListData() {
		expertPage({
			...pagination.value
		}).then(res => {
			if (res.code == '200') {
				let list = res.data.records
				listData.value = triggered.value ? list : listData.value.concat(list)
				total.value = res.data.total
				status.value = res.data.total <= listData.value.length ? 'noMore' : 'more'
				triggered.value = false
			}
		})
	}
</script>

<style lang="scss" scoped>
	.item-dom {
		font-size: 28rpx;
		color: #999999;
		font-family: "微软雅黑";

		.title {
			font-size: 30rpx;
			line-height: 2;
			color: #131313;
			font-weight: 600;
		}

		.status {
			float: right;
			font-size: 24rpx;
			color: #01c2b7;
		}
	}
</style>